// 轮播图demo

import React, { useCallback, useEffect, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Scrollbar } from "swiper";

import styles from "./index.module.scss";

// Import Swiper styles
import "swiper/css/autoplay";
import "swiper/css/scrollbar";
import "swiper/css";

function SwiperCom() {
  // 定时器ref
  const time1Ref = useRef(-1);
  const time2Ref = useRef(-1);

  useEffect(() => {
    return () => {
      // 离开页面的时候清理定时器
      clearInterval(time1Ref.current);
      clearInterval(time2Ref.current);
    };
  }, []);
  // swiper实例
  const mySwiperRef = useRef<any>(null);

  const changeFu1 = useCallback((val: boolean) => {
    const mySwiper = mySwiperRef.current;
    if (val) {
      // 立即停止轮播
      mySwiper.setTranslate(mySwiper.getTranslate());
      mySwiper.autoplay.stop();
    } else {
      clearInterval(time1Ref.current);
      time1Ref.current = window.setInterval(() => {
        if (!mySwiper.animating) {
          mySwiper.autoplay.start();
          clearInterval(time1Ref.current);
        }
      }, 2000);
    }
  }, []);

  const clickFu1 = useCallback((val: number) => {
    console.log("------", val);
  }, []);

  // swiper实例
  const mySwiperRef2 = useRef<any>(null);

  const changeFu2 = useCallback((val: boolean) => {
    const mySwiper = mySwiperRef2.current;
    if (val) {
      // 立即停止轮播
      mySwiper.setTranslate(mySwiper.getTranslate());
      mySwiper.autoplay.stop();
    } else {
      clearInterval(time2Ref.current);
      time2Ref.current = window.setInterval(() => {
        if (!mySwiper.animating) {
          mySwiper.autoplay.start();
          clearInterval(time2Ref.current);
        }
      }, 2000);
    }
  }, []);

  const clickFu2 = useCallback((val: number) => {
    console.log("------", val);
  }, []);

  return (
    <div className={styles.SwiperCom}>
      <div
        onMouseEnter={() => changeFu1(true)}
        onMouseLeave={() => changeFu1(false)}
        className="appSwBox"
      >
        <Swiper
          className="appSw"
          modules={[Autoplay, Scrollbar]}
          spaceBetween={0}
          slidesPerView={3}
          // onSlideChange={(e) => console.log("slide change", e)}
          onSwiper={(swiper) => (mySwiperRef.current = swiper)}
          scrollbar={{ draggable: true }}
          autoplay={{
            delay: 0,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          }}
          speed={5000}
          // direction="vertical"
          loop={true}
        >
          <SwiperSlide>
            <div className="row" onClick={() => clickFu1(1)}>
              Slide 1
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu1(1)}>
              Slide 2
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu1(1)}>
              Slide 3
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu1(1)}>
              Slide 4
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu1(1)}>
              Slide 5
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu1(1)}>
              Slide 6
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu1(1)}>
              Slide 7
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu1(1)}>
              Slide 8
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
      {/* ------------------------- */}
      <br />
      <br />
      <div
        onMouseEnter={() => changeFu2(true)}
        onMouseLeave={() => changeFu2(false)}
        className="appSwBox"
      >
        <Swiper
          className="appSw"
          modules={[Autoplay, Scrollbar]}
          spaceBetween={0}
          slidesPerView={3}
          // onSlideChange={(e) => console.log("slide change", e)}
          onSwiper={(swiper) => (mySwiperRef2.current = swiper)}
          scrollbar={{ draggable: true }}
          autoplay={{
            delay: 0,
            stopOnLastSlide: false,
            disableOnInteraction: false,
            reverseDirection: true,
          }}
          speed={5000}
          // direction="vertical"
          loop={true}
        >
          <SwiperSlide>
            <div className="row" onClick={() => clickFu2(1)}>
              Slide 1
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu2(1)}>
              Slide 2
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu2(1)}>
              Slide 3
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu2(1)}>
              Slide 4
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu2(1)}>
              Slide 5
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu2(1)}>
              Slide 6
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu2(1)}>
              Slide 7
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="row" onClick={() => clickFu2(1)}>
              Slide 8
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  );
}

const MemoSwiperCom = React.memo(SwiperCom);

export default MemoSwiperCom;
